<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="库位名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入库位名称"></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="库位编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
              <a-input v-model="model.code" placeholder="请输入库位编码"></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-model-item label="库位类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
              <a-input v-model="model.type" placeholder="请输入库位类型"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="所属仓库" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="warehouseName">
              <a-select
                v-model="model.warehouseId"
                style="width: 100%"
                placeholder="请选择"
                :options="warehouseList"
              ></a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="所属库区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="regionId">
              <a-select
                v-model="model.regionId"
                style="width: 100%"
                placeholder="请选择"
                :options="warehouseRegionList"
              ></a-select>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="所属库区Code" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="regionCode">
              <a-input v-model="model.regionCode" placeholder="请输入所属库区Code" style="width: 100%" />
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-model-item label="所属过道" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="asile">
              <a-select
                v-model="model.asile"
                style="width: 100%"
                placeholder="请选择"
                :options="warehouseAisleList"
              ></a-select>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="所属仓库ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="warehouseId">
              <a-input-number v-model="model.warehouseId" placeholder="请输入所属仓库ID" style="width: 100%" />
            </a-form-model-item>
          </a-col> -->
          
          <!-- <a-col :span="24">
            <a-form-model-item label="所属公司" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="company">
              <a-input v-model="model.company" placeholder="请输入所属公司"></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="statue">
              <j-dict-select-tag v-model="model.statue" dictCode="statueSlot" placeholder="请选择" />
              <!-- <a-input v-model="model.statue" placeholder="请输入状态"  ></a-input> -->
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import { queryWarehouseList, queryWarehouseAisleList, queryWarehouseRegionList } from '@/api/warehouse.js'
import { mapState } from 'vuex'

export default {
  name: 'BmsWarehousePositionForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        add: '/bms/bmsWarehousePosition/add',
        edit: '/bms/bmsWarehousePosition/edit',
        queryById: '/bms/bmsWarehousePosition/queryById',
      },
      warehouseList: [],
      warehouseAisleList: [],
      warehouseRegionList: []
    }
  },
  computed: {
    ...mapState({ 
      showWarehouseSize: (s) => s.business.showWarehouseSize,
      showWarehouseAisleSize: (s) => s.business.showWarehouseAisleSize,
      showWarehouseRegionSize: (s) => s.business.showWarehouseRegionSize
    }),
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  mounted() {
    this.getWarehouseList()
    this.getWarehouseAisleList()
    this.getWarehouseRegionList()
  },
  methods: {
    async getWarehouseRegionList() {
      try {
        const { showWarehouseRegionSize } = this
        const r = await queryWarehouseRegionList({ pageNo: 1, pageSize: showWarehouseRegionSize })
        this.warehouseRegionList = r.result.records.map((e) => {
          return { ...e, label: e.name, value: e.id }
        })
      } catch (_) {}
    },
    async getWarehouseAisleList() {
      try {
        const { showWarehouseAisleSize } = this
        const r = await queryWarehouseAisleList({ pageNo: 1, pageSize: showWarehouseAisleSize })
        this.warehouseAisleList = r.result.records.map((e) => {
          return { ...e, label: e.name, value: e.id }
        })
      } catch (_) {}
    },
    async getWarehouseList() {
      try {
        const { showWarehouseSize } = this
        const r = await queryWarehouseList({ pageNo: 1, pageSize: showWarehouseSize })
        this.warehouseList = r.result.records.map((e) => {
          return { ...e, label: e.name, value: e.id }
        })
        console.log(this.warehouseList,'111111111111');
      } catch (_) {}
    },
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      console.log(record, '-----------------------------');
      this.model = Object.assign({}, record)
      this.visible = true
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 增加 仓库名称
          const row = that.warehouseList.filter((f) => f.id === this.model.warehouseId)
          console.log(row,'++++++++++++++++++++++++++');
          if (row && row.length > 0) {
            this.model.warehouseName = row[0].label
          }
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          console.log(this.model);
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>